<!DOCTYPE html>
<html>
  
  <head th:include="/common/head :: head"></head>
  <style>
		.check_box {
				width:20px;
				height:20px
		}
  </style>
  <body class="layui-anim layui-anim-up">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">系统设置</a>
        <a>
          <cite>员工管理</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body" ng-app="listApp" ng-controller="listController">
	      <div class="layui-row">
	        <form class="layui-form layui-col-md12 x-so">
	           <!-- 
	          <input class="layui-input" placeholder="开始日" name="start" id="start">
	          <input class="layui-input" placeholder="截止日" name="end" id="end">
	          <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
	            -->
	           <input type="text" id="form_userName" name="userName" placeholder="用户名" autocomplete="off" class="layui-input"/>
	           <input type="text" id="form_mobile" name="mobile"  placeholder="手机号" autocomplete="off" class="layui-input"/>
	           &nbsp;<span>用户状态:</span>
	           <div class="layui-input-inline">
	           		<select name="status" id="form_status">
			             <option value="-1">全部</option>
			             <option value="0">正常</option>
			             <option value="1">暂停</option>
		          	</select>
	          </div>
	          <button class="layui-btn btn_search"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
	        </form>
	      </div>
	      <xblock>
	        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
	        <button class="layui-btn" onclick="addUser('添加用户','/user/userAdd.shtml',455,500)"><i class="layui-icon"></i>添加</button>
	        <span class="x-right" style="line-height:40px" id="span_total"></span>
	      </xblock>
	      <table class="layui-table">
	        <thead>
	          <tr>
	            <th>
	              <input type="checkbox" class="check_box" name="checkAll" id="checkAll" onclick="checkAll(this)" />
	            </th>
	            <th>ID</th>
	            <th>员工姓名</th>
	            <th>性别</th>
	            <th>所在部门</th>
	            <th>角色</th>
	            <th>联系电话</th>
	            <th>状态</th>
	            <th>更新时间</th>
	            <th>操作人</th>
	            <th>操作</th>
	        </thead>
	        <tbody>
	          <tr ng-repeat="user in userList">
	            <td>
	              <input type="checkbox" name="checkedUsers" class="check_box childs_check" value="{{user.id}}"/>
	            </td>
	            <td>{{user.id}}</td>
	            <td>{{user.userName}}</td>
	            <td>
	            	<span ng-if="user.sex==1">男</span>
	            	<span ng-if="user.sex==2">女</span>
	            </td>
	            <td></td>
	            <td></td>
	            <td>{{user.mobile}}</td>
	            <td>
					<span 
						onclick="updateStatus(this)" userId="{{user.id}}" status={{user.status}} 
						class="layui-btn layui-btn-normal layui-btn-mini" 
						ng-if="user.status==0">正常
					</span>
					<span 
						onclick="updateStatus(this)" userId="{{user.id}}" status={{user.status}} 
						class="layui-btn layui-btn-danger layui-btn-mini"
						ng-if="user.status==1">禁用
					</span>
				</td>
	            <td>{{user.updateDate}}</td>
	            <td>{{user.updateBy}}</td>
	            <td class="td-manage">
	            	<a title="删除" onclick="delUser(this)" href="javascript:;" userId="{{user.id}}"> 
	            	<i class="layui-icon">&#xe640;</i>
	            	</a>
	            	<a title="编辑" onclick="edit('编辑','/user/userUpdate.shtml',455,510,this)" href="" userId="{{user.id}}"> 
	            	<i class="layui-icon">&#xe642;</i>
					</a>
				</td>
	          </tr>
	        </tbody>
	      </table>		
		<div id="page"></div>
	</div>
  </body>
<script>
	//全局对象
	var _this = {size:5,current:1};
	angular.module("listApp",[]).controller("listController",function($scope){
		  _this.scope = $scope; 
	  })
	//搜索表单对象
	var formData={"userName":"","mobile":"","status":""};
	$(function(){
		//获取数据
		getData();
		//绑定事件
  	  	bindEvent();
  		//分页
		//initPage();
	})

	//条件查询
	function bindEvent(){
		//查询按钮的绑定事件
		$(".btn_search").bind("click",function(){
			formData.userName =$("#form_userName").val();
			formData.mobile = $("#form_mobile").val();
			formData.status = $("#form_status option:selected").val();
			_this.current = 1;
			getData();
		})
	}
	//获取数据
	function getData(){
		$.post("/user/getUserList",
				"pageNo="+_this.current+"&pageSize="+_this.size+"&userName="+formData.userName+"&mobile="+formData.mobile+"&status="+formData.status,
				function(result){
					console.log(result.data.records)
					if(result.data.pages != 0 && result.data.records.length == 0){
						_this.current = result.data.pages;
						getData();
						return;
					}
					showData(result);
		})
	}
	//展示数据
	function showData(result){
		//展示
		layui.use(['laypage', 'layer'], function(){
			 laypage = layui.laypage;
			 laypage.render({   //设置基础参数
			  elem: 'page',        //指向存放分页的容器，值可以是容器ID、DOM对象
			  count: result.data.total,   //数据总数
			  layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
			  limits: [5,10, 20],    //每页条数的选择项
			  curr:_this.current,    //起始页
			  limit:_this.size,      //每页显示的条数
			  jump: function(obj,first){  //jump切换分页的回调
				  				//obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
				  if(!first){
					  _this.current = obj.curr;
					  _this.size = obj.limit;
					  getData();
				  }
			  }
			 });
		})
		//展示列表
		_this.scope.userList = result.data.records;
		_this.scope.$apply();
		//展示总条数
		$("#span_total").html("共有数据:"+result.data.total+"条");
	}
	//执行全选操作
	function checkAll(ele){
		$(".childs_check").prop("checked",$(ele).prop("checked"));
	}
	//删除操作
	function deleteUsers(ids){
		$.post("/user/deleteUsers","ids="+ids,function(result){
			if(result.status==0){
				layer.msg(result.msg,function(){
					icon:1;
				})
				getData();
			}else{
				layer.msg(result.msg,function(){
					icon:2;
				});
			}
		})
	}
	//批量删除
	function delAll(){
		var userIds = "";
		//拿到指定名称对象的集合
		var userIDs = document.getElementsByName("checkedUsers");
		for( i in userIDs){
			if(userIDs[i].checked==true){
				userIds +=userIDs[i].value+","
			}
		}
		if(userIds==""){
			parent.layer.msg("至少选择一条数据，做删除");
			return;
		}
		userIds=userIds.substr(0,userIds.length-1);
		layer.confirm("确定删除吗？",function(index){
			//删除
			deleteUsers(userIds);
		})
	}
	//单个删除
	function delUser(ele){
		layer.confirm("确定要删除吗",function(){
			var id = $(ele).attr("userId");
			deleteUsers(id);
		})
	}
	//添加按钮
	function addUser(title,url,w,h,ele){
		parent.layer.open({
			type: 2,
	        area: [w+'px', h +'px'],
	        fix: false, //不固定
	        maxmin: true,
	        shadeClose: true,
	        shade:0.4,
	        title: title,
	        content: url,
	        end:function(){
	        	//刷新当前页面
	        	//location.replace(location.href);
	        	getData();
	        }
		})
	}
	//编辑按钮
	function edit(title,url,w,h,ele){
		var userId = $(ele).attr("userId");
		sessionStorage.setItem("userId",userId);
		parent.layer.open({
			type: 2,
	        area: [w+'px', h +'px'],
	        fix: false, //不固定
	        maxmin: true,
	        shadeClose: true,
	        shade:0.4,
	        title: title,
	        content: url,
	        end:function(){
	        	getData();
	        }
		})
	}
	//修改用户状态
	function updateStatus(ele){
		var userId = $(ele).attr("userId");
		var status = $(ele).attr("status");
		if(status==0){
			status=1;
		}else{
			status=0;
		}
		$.post("/user/updateStatus","userId="+userId+"&status="+status,function(result){
			if(result.status==0){
				layer.msg(result.msg);
				getData();
			}else{
				layer.msg(result.msg);
			}
		})
	}
</script>
</html>